<template>
  <div style="text-align: center">
    <canvas v-show="valid" class="vue-barcode-element"></canvas>
    <div v-show="!valid">
      <slot></slot>
    </div>
  </div>
</template>
<script>
const JsBarcode = require("jsbarcode");
export default {
  name: "JsBarcode",
  props: {
    value: {
      type: String,
      default: "",
    },
    // 选择要使用的条形码类型
    format: {
      type: String,
      default: "",
    },
    // 设置条之间的宽度
    width: {
      type: String,
      default: "2px",
    },
    height: {
      type: String,
      default: "40px",
    },
    // 覆盖显示的文本
    text: {
      type: String,
      default: "",
    },
    // 使文字加粗体或变斜体
    fontOptions: {
      type: String,
      default: "",
    },
    // 设置文本的字体
    font: {
      type: String,
      default: "",
    },
    // 设置文本的水平对齐方式
    textAlign: {
      type: String,
      default: "",
    },
    // 设置文本的垂直位置
    textPosition: {
      type: String,
      default: "",
    },
    // 设置条形码和文本之间的间距
    textMargin: {
      type: String,
      default: "",
    },
    // 设置文本的大小
    fontSize: {
      type: [String, Number],
      default: "14px",
    },
    // 设置条和文本的颜色
    lineColor: {
      type: String,
      default: "",
    },
    // 设置条形码的背景
    background: {
      type: String,
      default: "rgba(0,0,0,0)",
    },
    // 设置条形码周围的空白边距
    margin: {
      type: String,
      default: "",
    },
    marginTop: {
      type: String,
      default: "",
    },
    marginBottom: {
      type: String,
      default: "",
    },
    marginLeft: {
      type: String,
      default: "",
    },
    marginRight: {
      type: String,
      default: "",
    },
    // 是否在条形码下方显示文字
    displayValue: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      valid: true,
    };
  },
  mounted() {
    this.$watch("$props", this.render, { deep: true, immediate: true });
  },
  methods: {
    render() {
      const that = this;
      const settings = {
        format: this.format,
        height: this.height,
        width: this.width,
        text: this.text,
        fontOptions: this.fontOptions,
        font: this.font,
        textAlign: this.textAlign,
        textPosition: this.textPosition,
        textMargin: this.textMargin,
        fontSize: this.fontSize,
        background: this.background,
        lineColor: this.lineColor,
        margin: this.margin,
        marginTop: this.marginTop,
        marginBottom: this.marginBottom,
        marginLeft: this.marginLeft,
        marginRight: this.marginRight,
        valid: function(valid) {
          that.valid = valid;
        },
        displayValue: this.displayValue,
      };

      this.removeUndefinedProps(settings);

      JsBarcode(
        this.$el.querySelector(".vue-barcode-element"),
        this.value,
        settings
      );
    },

    removeUndefinedProps(obj) {
      for (const prop in obj) {
        if (
          Object.prototype.hasOwnProperty.call(obj, prop) &&
          obj[prop] === undefined
        ) {
          delete obj[prop];
        }
      }
    },
  },
};
</script>
